// 泛型约束
// 1. 封装格式化时间函数，支持 Date 和 string 格式的时间，可选参数，转换成功 10:10:10 时分秒
const formatTime = (time?: Date | string) => {
  if (typeof time === 'string') time = new Date(time)
  if (!time) time = new Date()
  // 获取时分秒
  const hours = time.getHours()
  const minutes = time.getMinutes()
  const seconds = time.getSeconds()
  return `${hours}:${minutes}:${seconds}`
}

// 2.  定义访问记录单项 对象 类型，定义访问记录 列表 类型，需要存储在本地的 key 字面量类型
type Data = {
  count: number
  time: string
}
type List = Data[]
const KEY = 'refresh_demo'

// 3. 封装获取访问历史记录函数，返回类型是 记录列表
const getData = () => {
  const jsonStr = localStorage.getItem(KEY)
  return JSON.parse(jsonStr || '[]') as List
}

// 4 封装修改访问历史记录函数
const setData = () => {
  const list = getData()
  const obj: Data = {
    count: list.length ? list[list.length - 1].count + 1 : 1,
    time: formatTime(new Date()),
  }
  list.push(obj)
  localStorage.setItem(KEY, JSON.stringify(list))
}

// 5 封装一个展示访问历史记录函数，且调用
const render = () => {
  setData()
  const listArr = getData()
  const divDom = document.querySelector('#app') as HTMLDivElement
  divDom.innerHTML = listArr
    .map((item) => `刷新次数为: ${item.count}, 刷新时的时间是: ${item.time}`)
    .join('<br>')
}
render()
export { formatTime, KEY, getData, setData }
